// DOMContentLoaded 事件的主要作用是确保代码在 DOM 元素完全加载并且可以安全访问之后执行
// 在这段代码中，DOMContentLoaded 事件保证了在任何操作 DOM 元素之前，这些元素都已经被加载完毕。这避免了潜在的错误，同时可以在适当的时候对 DOM 进行交互和操作
document.addEventListener('DOMContentLoaded',() => {


     // 初始化页面时显示 background-right-boottom 并将 yonhuguanli 字体变白
     const backgroundRightBoottom = document.querySelector('.background-right-boottom');
     const backgroundRightBoottomWenzhangguanli = document.querySelector('.background-right-boottom-wenzhangguanli');
     const yonhuguanli = document.querySelector('.yonhuguanli');
     const wenzhangliebiao = document.querySelector('.wenzhangliebiao');
    
     backgroundRightBoottom.style.display = 'block';
     yonhuguanli.style.color = 'white';
 
     // 点击 wenzhangliebiao 时隐藏 background-right-boottom，显示 background-right-boottom-wenzhangguanli
     wenzhangliebiao.addEventListener('click', () => {
         backgroundRightBoottom.classList.add('hide');
         backgroundRightBoottomWenzhangguanli.classList.add('show');
         backgroundRightBoottomWenzhangguanli.style.display = 'block';
         yonhuguanli.style.color = '#BDBDBD'; // 恢复原来的颜色
         wenzhangliebiao.style.color = 'white';
     });
 
     // 点击 yonhuguanli 时隐藏 background-right-boottom-wenzhangguanli，显示 background-right-boottom
     yonhuguanli.addEventListener('click', () => {
         backgroundRightBoottomWenzhangguanli.classList.remove('show');
         backgroundRightBoottom.classList.remove('hide');
         backgroundRightBoottom.style.display = 'block';
         backgroundRightBoottomWenzhangguanli.style.display = 'none';
         wenzhangliebiao.style.color = '#BDBDBD'; // 恢复原来的颜色
         yonhuguanli.style.color = 'white';
     });

    let iconShow = document.getElementById('icon-show')
    let iconHide = document.getElementById('icon-hide')
    let UL = document.querySelector('.background-left-bottom-ul')
    
    // 点击第一个i的时候
    iconShow.addEventListener('click',() => {
        if(window.innerWidth <= 768) {  // 只在移动端生效
            UL.style.opacity = '1'
            UL.style.display = 'block'
            iconShow.style.display = 'none'
            iconHide.style.display = 'block'
        }
    })

    // 点击第二个i的时候
    iconHide.addEventListener('click',() => {
        if(window.innerWidth <= 768) {
            UL.style.opacity = '0'
            setTimeout(() => {
                UL.style.display = 'none'
            },500)
            iconHide.style.display = 'none'
            iconShow.style.display = 'block'
        }
    })

    
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
        if (window.innerWidth > 768) {  // 如果是PC端则执行下面的代码
            // 在 PC 端隐藏按钮
            iconShow.style.display = 'none';
            iconHide.style.display = 'none';
            UL.style.opacity = '1';
            UL.style.display = 'block';
        } else {
            // 在移动端显示初始状态
            iconShow.style.display = 'block';
            iconHide.style.display = 'none';
            UL.style.opacity = '0';
            UL.style.display = 'none';
        }
    });

    // 初始化按钮状态
    if (window.innerWidth > 768) {
        iconShow.style.display = 'none';
        iconHide.style.display = 'none';
        UL.style.opacity = '1';
        UL.style.display = 'block';
    } else {
        iconShow.style.display = 'block';
        iconHide.style.display = 'none';
        UL.style.opacity = '0';
        UL.style.display = 'none';
    }
    // 鼠标悬停触发
    const toggleElement = document.querySelector('.xiangxia'); // 找到下拉箭头
    const dropdown = document.querySelector('.background-right-top-ul'); // 找到下拉菜单

    // 声明一个变量 timeout，用于存储设置的定时器 ID，以便后续可以清除定时器
    let timeout; // 用于设置超时时间

    // 当鼠标悬停在下拉箭头上时，清除任何可能存在的隐藏定时器，并立即显示下拉菜单
    toggleElement.addEventListener('mouseover', function() {
        clearTimeout(timeout); // 清除之前的隐藏定时
        dropdown.style.display = 'block'; // 显示下拉菜单
    });

    // 如果鼠标进入下拉菜单，则清除隐藏定时器，防止菜单被隐藏
    dropdown.addEventListener('mouseenter', function() {
        clearTimeout(timeout); // 鼠标进入下拉菜单时清除隐藏
    });

    // 当鼠标离开下拉菜单时，设置一个 200 毫秒的延时，如果在此时间内没有再次进入菜单，则将下拉菜单隐藏
    dropdown.addEventListener('mouseleave', function() {
        timeout = setTimeout(() => {
            dropdown.style.display = 'none'; // 鼠标离开时隐藏下拉菜单
        }, 200); // 设置延迟时间为200毫秒
    });

    // 当鼠标离开下拉箭头时，也设置一个 200 毫秒延时来决定是否隐藏下拉菜单
    toggleElement.addEventListener('mouseleave', function() {
        timeout = setTimeout(() => {
            dropdown.style.display = 'none'; // 鼠标离开下拉箭头时隐藏下拉菜单
        }, 200); // 设置延迟时间为200毫秒
    });
    
    
    // 点击添加新用户
    let boottomRight = document.querySelector('.boottom-right')
    let boottomXintian = document.querySelector('.boottom-xintian')
    let quxiaoButton = document.querySelector('.quxiao')
    let queren = document.querySelector('.queren')
    let userTableBody = document.querySelector('.userTableBody')
    let xiugai = document.querySelector('.xiugai')
    // 点击 .boottom-right 按钮显示模态框
    boottomRight.addEventListener('click', () => {
        boottomXintian.style.display = 'block';
        queren.style.display = 'block';
        xiugai.style.display = 'none';
    });

    // 点击 .quxiao 按钮隐藏模态框
    quxiaoButton.addEventListener('click', () => {
        boottomXintian.style.display = 'none';
    });

    // 发布新文章
    let wenzhangguanliBoottomRight = document.querySelector('.wenzhangguanli-boottom-right');
    let wenzhangguanliXintian = document.querySelector('.wenzhangguanli-xintian');
    let gaixiu = document.querySelector('.gaixiu');
    let xiaoqu = document.querySelector('.xiaoqu');
    let rentian = document.querySelector('.rentian');

    // 点击 wenzhangguanli-boottom-right 时显示 wenzhangguanli-xintian 模态框，并隐藏 gaixiu 按钮
    wenzhangguanliBoottomRight.addEventListener('click', () => {
        wenzhangguanliXintian.style.display = 'block';
        rentian.style.display = 'block';
        gaixiu.style.display = 'none';
    });

// 点击 xiaoqu 时隐藏 wenzhangguanli-xintian 模态框
xiaoqu.addEventListener('click', () => {
    wenzhangguanliXintian.style.display = 'none';
});

    // 点击添加按钮添加用户数据
    queren.addEventListener('click', async () => {
        // 获取表单数据
        let username = document.querySelector('.username').value;
        let email = document.querySelector('.email').value;
        let role = document.querySelector('.role').value;
        let status = document.querySelector('.status').value;
        let password = document.querySelector('.password').value;

        if (!username || !email || !password || !role || !status) {
            alert('请填写完整信息');
            return;
        }

        try {
            // 添加用户数据
            let response = await fetch('http://127.0.0.1:8080/addUser', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, email, password, role, status })
            });

            if (!response.ok) {
                throw new Error('添加失败');
            }

            let result = await response.json();
            if (result.success) {
                // 生成新的行
                let newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td>${userTableBody.querySelectorAll('tr').length + 1}</td>
                    <td>${username}</td>
                    <td>${email}</td>
                    <td>${role}</td>
                    <td>${status}</td>
                    <td><i class="iconfont icon-bianji bianji"></i> <i class="iconfont icon-shanchu shanchu"></i></td>
                `;

                // 将新行填到表格中
                userTableBody.appendChild(newRow);

                // 清空表单
                document.querySelector('.username').value = '';
                document.querySelector('.email').value = '';
                document.querySelector('.password').value = '';
                document.querySelector('.role').value = '';
                document.querySelector('.status').value = '';

                // 隐藏模态框
                boottomXintian.style.display = 'none';

                // 刷新用户数据
                loadUsers();
            } else {
                alert('添加失败，请检查输入是否正确');
            }
        } catch (error) {
            console.log('请求失败：', error);
        }
    });

    // 发布新文章
    rentian.addEventListener('click', async () => {
        // 获取表单数据
        let title = document.querySelector('.title').value;
        let author = document.querySelector('.author').value;
        let status = document.querySelector('.publishDate').value;
        let categoryFile = document.querySelector('.category').files[0];
        let content = document.querySelector('.content').value;

        console.log(title, author, status, categoryFile, content);
        
    
        if (!title || !author || !status || !categoryFile || !content) {
            alert('请填写完整信息');
            return;
        }
    
        // 创建 FormData 对象
        let formData = new FormData();
        formData.append('title', title);
        formData.append('author', author);
        formData.append('status', status);
        formData.append('category', categoryFile);
        formData.append('content', content);
    
        try {
            // 发送文章数据到服务器
            let response = await fetch('http://127.0.0.1:8080/addArticle', {
                method: 'POST',
                body: formData
            });
    
            if (!response.ok) {
                throw new Error('发布失败');
            }
    
            let result = await response.json();
            if (result.success) {
                // 关闭模态框
                wenzhangguanliXintian.style.display = 'none';
    
                // 清空表单
                document.querySelector('.title').value = '';
                document.querySelector('.author').value = '';
                document.querySelector('.status').value = '';
                document.querySelector('.category').value = '';
                document.querySelector('.content').value = '';
    
                // 刷新文章数据
                loadArticles();
            } else {
                alert('发布失败，请检查输入是否正确');
            }
        } catch (error) {
            console.log('请求失败：', error);
        }
    });


     // 添加删除按钮的点击事件监听器
    userTableBody.addEventListener('click', async (event) => {
        // 检查用户点击的元素是否具有 bianji 类。如果点击的元素是编辑按钮，将执行下面的编辑逻辑。
        if (event.target.classList.contains('bianji')) {
            // 使用 closest('tr') 方法找到点击按钮所在的行（tr 元素）
            const row = event.target.closest('tr');
            // 获取当前行的数据
            const userId = row.querySelector('td:first-child').textContent;
            const username = row.querySelector('td:nth-child(2)').textContent;
            const email = row.querySelector('td:nth-child(3)').textContent;
            const role = row.querySelector('td:nth-child(4)').textContent;
            const status = row.querySelector('td:nth-child(5)').textContent;

            // 填充模态框中的输入框
            document.querySelector('.username').value = username;
            document.querySelector('.email').value = email;
            document.querySelector('.password').value = ''; // 密码字段清空
            document.querySelector('.role').value = role;
            document.querySelector('.status').value = status;

            // 显示模态框
            boottomXintian.style.display = 'block';

            // 记录当前编辑的用户ID
            document.querySelector('.boottom-xintian').dataset.userId = userId;

            // 隐藏 queren 按钮，显示 xiugai 按钮
            queren.style.display = 'none';
            xiugai.style.display = 'block';
        }

        // 检查用户点击的元素是否具有 shanchu 类。如果点击的元素是删除按钮，将执行下面的删除逻辑。
        if (event.target.classList.contains('shanchu')) {
            // 使用 closest('tr') 方法找到点击按钮所在的行（tr 元素）
            const row = event.target.closest('tr');
            // textContent 会返回元素内所有文本的字符串，包括子元素的文本（但不包括子元素的 HTML 标签） 比innerHTML更适合获取文本内容
            const userId = row.querySelector('td:first-child').textContent.split('.')[0];

            try {
                const response = await fetch(`http://127.0.0.1:8080/deleteUser/${userId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error('删除失败');
                }

                const result = await response.json();
                if (result.success) {
                    // 从页面中移除对应的行
                    row.remove();

                    // 重新加载用户数据
                    loadUsers();
                } else {
                    alert('删除失败，请检查输入是否正确');
                }
            } catch (error) {
                console.log('请求失败：', error);
            }
        }
    });

    // 添加编辑和删除按钮的点击事件监听器
const articleTableBody = document.querySelector('.wenzhangguanli-userTableBody');

    articleTableBody.addEventListener('click', async (event) => {
        // 检查用户点击的元素是否具有 bianji 类。如果点击的元素是编辑按钮，将执行下面的编辑逻辑。
        if (event.target.classList.contains('bianji')) {
            // 使用 closest('tr') 方法找到点击按钮所在的行（tr 元素）
            const row = event.target.closest('tr');
            // 获取当前行的数据
            const articleId = row.querySelector('td:first-child').textContent;
            const title = row.querySelector('td:nth-child(2)').textContent;
            const status = row.querySelector('td:nth-child(3)').textContent;
            const author = row.querySelector('td:nth-child(4)').textContent;

            // 填充模态框中的输入框
            document.querySelector('.title').value = title;
            document.querySelector('.author').value = author;
            document.querySelector('.status').value = status;

            // 显示模态框
            wenzhangguanliXintian.style.display = 'block';

            // 记录当前编辑的文章ID
            document.querySelector('.wenzhangguanli-xintian').dataset.articleId = articleId;

            // 隐藏 rentian 按钮，显示 gaixiu 按钮
            rentian.style.display = 'none';
            gaixiu.style.display = 'block';
        }

        // 检查用户点击的元素是否具有 shanchu 类。如果点击的元素是删除按钮，将执行下面的删除逻辑。
        if (event.target.classList.contains('shanchu')) {
            // 使用 closest('tr') 方法找到点击按钮所在的行（tr 元素）
            const row = event.target.closest('tr');
            // textContent 会返回元素内所有文本的字符串，包括子元素的文本（但不包括子元素的 HTML 标签） 比innerHTML更适合获取文本内容
            const articleId = row.querySelector('td:first-child').textContent;

            try {
                const response = await fetch(`http://127.0.0.1:8080/deleteArticle/${articleId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error('删除失败');
                }

                const result = await response.json();
                if (result.success) {
                    // 从页面中移除对应的行
                    row.remove();

                    // 重新加载文章数据
                    loadArticles();
                } else {
                    alert('删除失败，请检查输入是否正确');
                }
            } catch (error) {
                console.log('请求失败：', error);
            }
        }
    });

    // 点击 xiugai 按钮更新用户数据
xiugai.addEventListener('click', async () => {
    // 获取表单数据
    let username = document.querySelector('.username').value;
    let email = document.querySelector('.email').value;
    let role = document.querySelector('.role').value;
    let status = document.querySelector('.status').value;
    let password = document.querySelector('.password').value;

    if (!username || !email || !password || !role || !status) {
        alert('请填写完整信息');
        return;
    }

    try {
        // 检查是否是编辑模式
        const userId = document.querySelector('.boottom-xintian').dataset.userId;

        if (userId) {
            let response = await fetch(`http://127.0.0.1:8080/updateUser/${userId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, email, password, role, status })
            });

            if (!response.ok) {
                throw new Error('更新失败');
            }

            let result = await response.json();
            if (result.success) {
                // 更新页面中的对应行
                const rows = userTableBody.querySelectorAll('tr');
                const row = Array.from(rows).find(row => row.querySelector('td:first-child').textContent === userId);
                if (row) {
                    row.querySelector('td:nth-child(2)').textContent = username;
                    row.querySelector('td:nth-child(3)').textContent = email;
                    row.querySelector('td:nth-child(4)').textContent = role;
                    row.querySelector('td:nth-child(5)').textContent = status;
                }

                // 清空表单
                document.querySelector('.username').value = '';
                document.querySelector('.email').value = '';
                document.querySelector('.password').value = '';
                document.querySelector('.role').value = '';
                document.querySelector('.status').value = '';

                // 隐藏模态框
                boottomXintian.style.display = 'none';

                // 刷新用户数据
                loadUsers();

                // 重置按钮状态
                queren.style.display = 'block';
                xiugai.style.display = 'none';
            } else {
                alert('更新失败，请检查输入是否正确');
            }
        }
    } catch (error) {
        console.log('请求失败：', error);
    }
});

// 点击 gaixiu 按钮更新文章数据
gaixiu.addEventListener('click', async () => {
    // 获取表单数据
    let title = document.querySelector('.title').value;
    let author = document.querySelector('.author').value;
    let status = document.querySelector('.status').value;
    let categoryFile = document.querySelector('.category').files[0];
    let content = document.querySelector('.content').value;

    if (!title || !author || !status || !content) {
        alert('请填写完整信息');
        return;
    }

    try {
        // 检查是否是编辑模式
        const articleId = document.querySelector('.wenzhangguanli-xintian').dataset.articleId;

        if (articleId) {
            // 创建 FormData 对象
            let formData = new FormData();
            formData.append('title', title);
            formData.append('author', author);
            formData.append('status', status);
            formData.append('content', content);

            if (categoryFile) {
                formData.append('category', categoryFile);
            }

            let response = await fetch(`http://127.0.0.1:8080/updateArticle/${articleId}`, {
                method: 'PUT',
                body: formData
            });

            if (!response.ok) {
                throw new Error('更新失败');
            }

            let result = await response.json();
            if (result.success) {
                // 更新页面中的对应行
                const rows = articleTableBody.querySelectorAll('tr');
                const row = Array.from(rows).find(row => row.querySelector('td:first-child').textContent === articleId);
                if (row) {
                    row.querySelector('td:nth-child(2)').textContent = title;
                    row.querySelector('td:nth-child(3)').textContent = status;
                    row.querySelector('td:nth-child(4)').textContent = author;
                }

                // 清空表单
                document.querySelector('.title').value = '';
                document.querySelector('.author').value = '';
                document.querySelector('.status').value = '';
                document.querySelector('.category').value = '';
                document.querySelector('.content').value = '';

                // 隐藏模态框
                wenzhangguanliXintian.style.display = 'none';

                // 刷新文章数据
                loadArticles();

                // 重置按钮状态
                rentian.style.display = 'block';
                gaixiu.style.display = 'none';
            } else {
                alert('更新失败，请检查输入是否正确');
            }
        }
    } catch (error) {
        console.log('请求失败：', error);
    }
});

    
     // 加载用户数据
     function loadUsers() {
        fetch('http://127.0.0.1:8080/users')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const userTableBody = document.querySelector('.userTableBody');
                    userTableBody.innerHTML = ''; // 清空现有数据
                    data.data.forEach(user => {
                        const newRow = document.createElement('tr');
                        newRow.innerHTML = `
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td>${user.email}</td>
                            <td>${user.role}</td>
                            <td>${user.status}</td>
                            <td><i class="iconfont icon-bianji bianji"></i> <i class="iconfont icon-shanchu shanchu"></i></td>
                        `;
                        userTableBody.appendChild(newRow);
                    });
                }
            })
            .catch(error => console.error('加载用户数据失败：', error));
    }

    // 页面加载时调用加载用户数据
    loadUsers();


    // 加载文章数据
function loadArticles() {
    fetch('http://127.0.0.1:8080/articles')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const articleTableBody = document.querySelector('.wenzhangguanli-userTableBody');
                articleTableBody.innerHTML = ''; // 清空现有数据
                data.data.forEach(article => {
                    const newRow = document.createElement('tr');
                    newRow.innerHTML = `
                        <td>${article.id}</td>
                        <td>${article.title}</td>
                        <td>${article.status}</td>
                        <td>${article.author}</td>
                        <td><i class="iconfont icon-bianji bianji"></i> <i class="iconfont icon-shanchu shanchu"></i></td>
                    `;
                    articleTableBody.appendChild(newRow);
                });
            }
        })
        .catch(error => console.error('加载文章数据失败：', error));
}

// 页面加载时调用加载文章数据
loadArticles();
})


window.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.toggle').addEventListener('click',() => {
        if (document.body.classList.contains('dark-mode')) {
            document.body.classList.remove('dark-mode');
        } else {
            document.body.classList.add('dark-mode')
        }
    })
})